<template>
  <div>
    <h2>权限列表</h2>

    <template>
      <el-table
        border
        :data="detail"
        style="width: 100%">
        <el-table-column
          align="center"
          width="100px"
          prop="uname"
          label="管理员"/>

        <el-table-column
          align="center"
          prop="urole"
          width="200px"
          label="管理员身份"/>


        <el-table-column
        align="center"
          prop="roles"
          label="权限列表"/>

      </el-table>
    </template>
<br/>

    <el-form :inline="true" :model="routerVo" class="demo-form-inline">
      <el-form-item label="拥有者姓名">
        <el-input v-model="routerVo.uname" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="routerVo.urole" placeholder="角色"></el-input>
      </el-form-item>
      <el-form-item label="路径名">
        <el-input v-model="routerVo.pathName" placeholder="路径"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRouterList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空查询条件</el-button>

      </el-form-item>

    </el-form>
    <template>
      <el-table
        border
        :data="routerList"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="权限id"/>
        <el-table-column
          align="center"

          prop="pid"
          label="权限组pid"/>
        <el-table-column
          align="center"
          prop="uname"
          label="归属者name"/>
        <el-table-column
          align="center"
          prop="urole"
          label="归属者角色"/>
        <el-table-column
          align="center"
          prop="path"
          label="路径path"/>
        <el-table-column
          align="center"
          prop="pathName"
          label="路径名"/>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getRouterList"

    />
  </div>
</template>

<script>
import route from "../../api/route";

export default {
  name: "ACL",
  data() {
    return {
      routerList: null,
      page: 1, // 当前页
      limit: 10, // 每页显示数
      total: 0, // 总记录数
      routerVo: {},
      detail:{}
    }
  },

  created() {
    this.getRouterList()
      this.getRputerDetail()
  },
  methods: {
    /**
     * 详细权限
     */
    async  getRputerDetail(){
      await  route.getRputerDetail()
        .then(response=>{
          this.detail =response.data.list;
        })
    },
    /**
     * 【权限列表条件分页】
     * @param page
     * @returns {Promise<void>}
     */
    async getRouterList(page = 1) {
      this.routerVo.current = page
      this.routerVo.limit = this.limit
      await route.getRouteList(this.routerVo)
        .then(response => {
          this.routerList = response.data.rows
          this.total=response.data.total

        })
    },
    //清除查询
    resetData() {
      this.routerVo = {}
      this.getRouterList()
    },
  }
}
</script>

<style scoped>

</style>
